<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <base th:href="@{/}">
        <meta charset="UTF-8">
        <title>主页</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <script src="js/jquery.min.js"></script>
        <script type="text/javascript" th:inline="javascript">
            function setStatus(status, th) {
                $.ajax({
                    //请求路径，要注意的是url和th:inline="javascript"
                    url : [[@{/admin/status}]],
                    //请求类型
                    type : "post",
                    //data表示发送的数据
                    data : {
                        status: status,
                        aname: th.value
                    },
                    //成功响应的结果
                    success : function(obj){//obj响应数据
                        if(obj == "ok"){
                            history.go(0);
                        } else {
                            alert(obj);
                            history.go(0);
                        }
                    },
                    error : function() {
                        alert("处理异常！");
                    }
                });
            }

            function opSetting(type, th) {
                $('#exampleModal').modal('toggle');
                console.log(type)
                $('#exampleModal').find('button[name=btn]').val(type);
                if (type == 'setting') {
                    $.ajax({
                        url: [[@{/admin/get/key}]],
                        dataType: 'json',
                        type: 'get',
                        data: {
                            username: th.value
                        },
                        //成功响应的结果
                        success : function(obj){//obj响应数据
                            console.log(obj)
                            $('#addrForm').find('input[name=username]').val(obj.aname);
                            $('#addrForm').find('input[name=password]').val(obj.apwd);
                            $('#addrForm').find('input[name=money]').val(obj.money);
                            $('#addrForm').find('input[name=key]').val(obj.aname);
                            $('#addrForm').find('select[name=isSuper]').val(obj.isSuper);
                        },
                        error : function() {
                            alert("处理异常！");
                        }
                    });
                } else {

                }
            }

            function submit(th) {
                console.log(th.value)
                $.ajax({
                    url: (th.value == 'setting' ? [[@{/admin/updata}]] : [[@{/admin/add}]]),
                    dataType: 'json',
                    type: 'post',
                    data: $('#addrForm').serialize(),
                    success: function(json) {
                        console.log(json)
                    },
                    error: function (json) {
                        console.log(json)
                        if (json.status === 200) {
                            if (json.responseText == 'ok') {
                                history.go(0)
                            } else {
                                alert(json.responseText);
                                history.go(0);
                            }

                        }
                    }
                })

            }
        </script>
    </head>
    <body>
        <!-- 加载header.html -->
        <div th:include="admin/header"></div>
        <br><br><br>
        <div class="container">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">管理员管理</h3>
                </div>
                <div class="panel-body">
                    <div class="table table-responsive">
                        <div class="text-right" style="margin-bottom: 5px">
                            <button class="btn btn-success" onclick="opSetting('add', this)">添加</button>
                        </div>
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>用户名</th>
                                    <th>薪资</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody class="text-center">
                                <tr th:each="admin:${admins}">
                                    <td th:text="${admin.aname}"></td>
                                    <td th:text="${admin.money}"></td>
                                    <td>
                                        <button class="btn btn-danger" th:value="${admin.aname}" th:if="${admin.status} == 1" onclick="setStatus(0, this)">禁用</button>
                                        <button class="btn btn-success" th:value="${admin.aname}" th:if="${admin.status} != 1" onclick="setStatus(1, this)">启用</button>

                                        <button class="btn btn-primary" th:value="${admin.aname}" onclick="opSetting('setting', this)">设置</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="3" align="right">
                                        <ul class="pagination">
                                            <li><a>第<span th:text="${currentPage}" ></span>页</a></li>
                                            <li><a>共<span th:if="${totalPage} > 0" th:text="${totalPage}" ></span><span th:if="${totalPage} < 1">1</span>页</a></li>
                                            <li>
                                                <span th:if="${currentPage} != 1" >
                                                    <a th:href="@{selectUser?currentPage=${currentPage - 1}}">上一页</a>
                                                </span>
                                                <span th:if="${currentPage} != ${totalPage} and ${totalPage} > 0" >
                                                    <a th:href="@{selectUser?currentPage=${currentPage - 1}}">下一页</a>
                                                </span>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 style="margin-bottom: 0;line-height: 1.5;font-size: 24px;" id="exampleModalLabel">地址编辑</h5>
                        </div>
                        <div class="modal-body">
                            <form id="addrForm" action="" method="post">
                                <div class="form-group row has-success">
                                    <label class="col-sm-2 col-md-2 control-label">用户名</label>
                                    <div class="col-sm-4 col-md-4">
                                        <input type="text" class="form-control" placeholder="请输入管理员名" name="username">
                                    </div>
                                </div>
                                <div class="form-group row has-success">
                                    <label class="col-sm-2 col-md-2 control-label">密码</label>
                                    <div class="col-sm-4 col-md-4">
                                        <input type="password" class="form-control" placeholder="请输入密码" name="password">

                                    </div>
                                </div>
                                <div class="form-group row has-success">
                                    <label class="col-sm-2 col-md-2 control-label">薪资</label>
                                    <div class="col-sm-4 col-md-4">
                                        <input type="number" class="form-control" placeholder="请输入薪资" name="money">
                                    </div>
                                </div>
                                <div class="form-group row has-success">
                                    <label class="col-sm-2 col-md-2 control-label">是否为超级管理员</label>
                                    <div class="col-sm-4 col-md-4">
                                        <select class="custom-select custom-select-lg mb-3" name="isSuper">
                                            <option value="1">是</option>
                                            <option value="0">否</option>
                                        </select>
                                    </div>
                                </div>
                                <input type="hidden" name="key">
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="$('#addrForm')[0].reset();">关闭</button>

                            <button type="button" class="btn btn-primary" name="btn" onclick="submit(this);">提交</button>
                        </div>
                    </div>
                </div>

        </div>
    </body>
</html>